<template>
	<view class="container user-container" :style="getTopStyle()">
		<image class="user-bg" :src="$fileUrl+'user-bg.png'" mode="top"></image>
		<view class="user-main">
			<view class="user-top">
				<template v-if="!isLogin">
					<image class="user-header" :src="$fileUrl+'logo.png'" mode="aspectFill"></image>
					<view class="top-action" @click="clickLogin">点击登录</view>
				</template>
				<template v-else>
					<image class="user-header" :src="userInfo.headPortrait" mode="aspectFill"></image>
					<view class="top-action" @click="jump('/pages/user/setting')">{{userInfo.name|| '暂未设置'}}</view>
					<view class="iconfont" @click="jump('/pages/user/setting')">&#xe643;</view>
				</template>



			</view>
			<view class="user-panel">
				<view class="user-list">
					<image class="user-list-ico" :src="$fileUrl+'user-role.png'" mode="widthFix"></image>
					<view class="user-list-title">角色身份</view>
					<view class="yuan-btn btn-primary">{{isLogin?userInfo.userType:'--'}}</view>
				</view>
				<view class="user-list">
					<image class="user-list-ico" :src="$fileUrl+'user-permission.png'" mode="widthFix"></image>
					<view class="user-list-title">角色权限</view>
					<view class="yuan-btn btn-warning">{{isLogin?userInfo.roleName:'--'}}</view>
				</view>
				<view class="user-list" @click="clickBroker">
					<image class="user-list-ico" :src="$fileUrl+'user-broker.png'" mode="widthFix"></image>
					<view class="user-list-title">认证技术经纪人</view>
					<view class="yuan-btn c-success" v-if="userInfo&&userInfo.hasTechnicalRepresentative===1">已认证</view>
					<view class="yuan-btn c-danger" v-else>未认证</view>
					
					<view class="iconfont">&#xe613;</view>
				</view>
				<view class="user-list" v-if="isLogin" @click="jump('/pages/user/editPassword')">
					<image class="user-list-ico" :src="$fileUrl+'user-password.png'" mode="widthFix"></image>
					<view class="user-list-title">修改密码</view>
					<view class="iconfont">&#xe613;</view>
				</view>
			</view>
			<view class="bottom-btn-box">
				<view class="yuan-btn btn-primary bottom-btn" @click="clickOut" v-if="isLogin">退出登录</view>
				<view class="yuan-btn btn-primary bottom-btn" @click="clickLogin" v-else>登录</view>
			</view>
		</view>

	</view>
</template>

<script setup lang="ts">
	import { onMounted, ref } from 'vue';
	import { getStorage, hideLoading, setStorage, showLoading, showToast, utilLogin } from '@/common/util';
	import commonStore from '@/store/commonStore';
	import { onShareAppMessage, onShareTimeline, onShow } from '@dcloudio/uni-app'
	import api from '@/common/api';
import userStore from '../../store/userStore';
	const list1 = ref([
		{ title: '角色身份：', ico: 'user-role.png' },
		{ title: '角色权限：', ico: 'user-permission.png' },
		{ title: '认证技术经纪人：', ico: 'user-broker.png' }
	])

	const userInfo = ref<any>({})
	const isLogin = ref(false)
	onMounted(async () => {
		getUserInfo()
	})
	onShow(async () => {
		if (commonStore.state.reload.indexOf('userIndex') >= 0) {
			getUserInfo()
			commonStore.commit('delReload', 'userIndex')
		}
	})
	const getUserInfo = async () => {
		userInfo.value = getStorage('userInfo') || {}
		let userAuth = getStorage('userAuth') || {}
		if (userAuth.userToken) {
			isLogin.value = true
		} else {
			isLogin.value = false
		}
	}
	const getTopStyle = () => {
		// #ifdef MP-WEIXIN
		const res = uni.getMenuButtonBoundingClientRect()
		return `padding-top:${res.top + 50}px`
		// #endif
		// #ifdef H5
		return `padding-top:20px`
		// #endif

	}
	const clickBroker=()=>{
		if(userInfo&&userInfo.value.hasTechnicalRepresentative===1){
			return
		}else if(isLogin.value){
			jump('/pages/user/broker')
		}else{
			showToast('您还没有登录，请登录后重试')
		}
		
	}
	const jump = (url : string) => {
		uni.navigateTo({ url: url })
	}
	const loginByWxCode = async (code : string) => {
		try {
			const res = await api.wxLogin({ code })
			if (res.data.id) {
				// 有用户信息 保存信息
				doLogin(res.data)
			} else {
				// 没有用户信息，跳转账号密码登录
				jump('/pages/user/login')
			}
		} finally {
			hideLoading()
		}
	}
	const doLogin = async (res : any) => {
		//获取用户信息
		setStorage("userAuth", { userToken: res.token });
		showLoading()
		try {
			await userStore.dispatch('getUserInfo')
			commonStore.commit('reloadAll')
			getUserInfo()
		} finally {
			hideLoading()
		}
	}
	const clickLogin = () => {
		// 先通过wxcode 进行登录

		// #ifdef MP-WEIXIN
		showLoading()
		wx.login({
			success: (res) => {
				if (res.code) {
					loginByWxCode(res.code)
				} else {
					console.log('登录失败！' + res.errMsg)
				}
			}
		})
		// #endif
		// #ifdef H5
		jump('/pages/user/login')
		// #endif
	}

	const clickOut = () => {
		uni.showModal({
			title: '提示',
			content: '你确定退出登录嘛？',
			confirmText: '立即退出',
			success: (res) => {
				if (res.confirm) {
					setStorage("userAuth", '');
					setStorage("userInfo", '');
					commonStore.commit('addReload', 'userIndex')
					commonStore.commit('addReload', 'index')
					showToast('退出成功')
					getUserInfo()
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});

	}
</script>

<style lang="scss">
	.user-container {
		height: 100%;
		position: relative;

		.user-bg {
			width: 100%;
			height: 1624rpx;
			position: fixed;
			left: 0;
			top: 0;
			z-index: 1;
		}

		.user-main {
			position: relative;
			z-index: 2;
			padding: 0 20rpx;
		}

		.user-top {
			display: flex;
			align-items: center;
			padding: 0 30rpx;
			margin-bottom: 80rpx;

			.iconfont {
				font-size: 42rpx;
			}
		}

		.user-header {
			border: solid 1px #eee;
			width: 150rpx;
			height: 150rpx;
			border-radius: 150rpx;
		}

		.top-action {
			font-size: 37rpx;
			font-weight: bold;
			flex-grow: 1;
			margin-left: 20rpx;
		}

		.user-panel {
			background-color: #fff;
			box-shadow: 0 0 10rpx 4rpx rgba(0, 0, 0, 0.1);
			border-radius: 16rpx;
			padding: 0 15rpx;
			margin-bottom: 20rpx;
		}

		.user-list {
			display: flex;
			align-items: center;
			padding: 30rpx 15rpx;
			border-bottom: solid 1px #E3E3E3;

			.iconfont {
				transform: rotateZ(-90deg);
				color: #868686;
			}

			.yuan-btn {
				padding: 0 20rpx;
				font-size: 26rpx;
				height: 50rpx;
				border-radius: 50rpx;
			}
		}

		.user-list:last-child {
			border-bottom: unset;
		}

		.user-list-ico {
			width: 50rpx;
			height: 50rpx;
		}

		.user-list-title {
			flex-grow: 1;
			margin-left: 30rpx;
			font-size: 26rpx;
		}

		.bottom-btn-box {
			margin-top: 100px;
		}

		.bottom-btn {
			height: 88rpx;
			border-radius: 88rpx;
			margin-bottom: 30rpx;
		}
	}
</style>